<template>
<div class="tou">
    <div :class="{act:conn == index}" class="qiang" v-for="(item,index) in arr" :key="index" @click="fun(index)"> {{item}} </div>
</div>

</template>

<script>
export default {
    data(){
        return{
            conn:0,
            arr:["正在抢购","上新预告"],

        }
    },
    methods:{
        fun(index){
            this.conn = index;
        },
    }

}
</script>


<style scoped lang="scss">
.tou{
    width: 200px;
    height: 35px;
    display: flex;
    background-color: rgb(221, 107, 107);
    font-size: 16px;
    color: #ffffff;
    margin: 120px 0px 15px 5px;
    line-height: 35px;
}
.tou .qiang{
    text-align: center;
    width: 100px;
    height: 35px;
}
.tou .act{
    font-size: 18px;
    font-weight: bold;
}


</style>
